{% load static %}
<!doctype html>
<html lang="zh">
<head>
    <title>人脸录入</title>
    <link rel="shortcut icon" href="{% static 'ios-face-recognition.png' %}">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'js/jquery-3.6.0.js' %}"></script>
    <script src="{% static 'js/bootstrap.bundle.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>

</head>
<body>
<div class="container" style="margin-top: 5%">
    <div class="row">
        <div class="col">
            <video id="video" width="640" height="480" class="img-fluid img-thumbnail" autoplay></video>
            <canvas id="canvas" width="640" height="480" class="rounded" style="display:none;"></canvas>
        </div>
        <div class="col">
            <img id="photo" width="640" height="480" class="img-fluid img-thumbnail" alt="...">
        </div>
        <div class="w-100"></div>
        <div class="col mt-5">
            <div class="input-group flex-nowrap" style="height: 48px">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="addon-wrapping">居民身份证</span>
                </div>
                <input style="height: 48px" id="id_card" type="text" class="form-control"
                       placeholder="请输入身份证号码采集人脸" aria-label="Username"
                       aria-describedby="addon-wrapping">
            </div>
        </div>
        <div class="col mt-5">
            <button type="button" class="btn btn-primary btn-lg btn-block" id="snap">采集</button>
        </div>
    </div>
</div>
<script type="text/javascript">

    const video = document.getElementById('video');
    //获取canvas元素
    const canvas = document.getElementById('canvas');
    // 创建2D绘图上下文
    const context = canvas.getContext('2d');
    const snap = document.getElementById('snap');
    const photo = document.getElementById('photo');
    // 获取用户的媒体设备
    navigator.mediaDevices.getUserMedia({video: true})
        .then(function (stream) {
            video.srcObject = stream;
        })
        .catch(function (error) {
            console.log("Something went wrong!", error);
        });
    snap.addEventListener('click', function () {
        //trim()去除空格
        const id_card = $('#id_card').val().trim()
        if (id_card === '') {
            alert('请输入身份证号码，再进行采集!')
            window.location.reload(true);
        } else {
            context.drawImage(video, 0, 0, 640, 480);
            photo.src = canvas.toDataURL('image/jpg');
            idCard = document.getElementById("id_card").value
            // 可以在这里添加将canvas图像发送到服务器的代码
            // 假设photo.src是包含前缀的Base64字符串
            let base64Image = photo.src.split(',')[1]; // 去掉前缀
            console.log(base64Image)
            fetch('/faceCollectionInput/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    image_base64: base64Image,
                    userCardNum: idCard
                })
            }).then(response => response.json())
                .then(data => {
                    alert(data.message)
                    window.location.reload(true);
                })
                .catch(error => console.error('Error:', error));
        }
    });
</script>
</body>
</html>
